<template>
  <BKMutableContainer
    class="bg-white"
  >
    <template #left>
      <ConfigTree
        ref="tree"
        :can-switch-bz-code="configs.tree.canSwitchBzCode !== false"
        :has-add="configs.tree.hasAdd !== false"
        :configs="configs.tree"
        @nodeClicked="handleNodeClick"
        @reload="handleTreeReload"
      >
        <template #appendBzCode="scope">
          <slot
            name="leftTreeAppendBzCode"
            v-bind="scope"
          />
        </template>
      </ConfigTree>
    </template>
    <ConfigGrid
      ref="grid"
      v-if="showGrid"
      :parent="currentNode"
      parent-required
      :configs="gridConfigs"
      condition-form-layout="flex"
      :has-add="false"
      :has-batch-remove="false"
      :condition-form-props="{size: 'small',buttonSize: 'small',submitIcon: 'ri-search-line', resetIcon: 'ri-brush-3-line'}"
    />
  </BKMutableContainer>
</template>

<script>

const appId = 'YSJC'
const bzCode = 'YSJC'

export default {
  name: 'MenuStatisitcs',
  data () {
    return {
      configs: {
        tree: {
          includeSelf: true,
          hasIcon: true,
          canSwitchBzCode: false,
          appId,
          bzCode,
          async: false,
          treeConfigId: 'YSJC_QXGL_JSGL',
          defaultExpandAll: true,
          hasAdd: false
        }
      },
      currentNode: null,
      extraConditions: [],
      showGrid: false
    }
  },
  computed: {
    gridConfigs () {
      return {
        appId: 'YSJC',
        bzCode: 'YSJC',
        isView: true,
        viewCode: 'YSQJC_CDYHTJ_VIEW',
        parentNodeProps: { MENU_ID: 'id' },
        extraConditions: this.extraConditions,
        noOperation: true,
        defaultQueryParamsProcessor: this.defaultQueryParamsProcessor
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    handleNodeClick (data) {
      this.currentNode = data
      this.$emit('nodeClick', data)
      this.$nextTick(() => {
        this.refreshGrid(true)
      })
    },
    handleTreeReload () {
      this.currentNode = null
      this.$nextTick(() => {
        this.$refs.grid && this.$refs.grid.refreshList()
      })
      this.$emit('treeReload')
    },
    refreshGrid (clearFilters = false, reload = false) {
      if (!this.$refs.grid) return
      if (clearFilters) {
        this.$refs.grid.clearFilter()
      }
      // this.$refs.grid.refreshList(reload ? null : this.getDynamicParams(this.currentNode, this.gridConfigs.parentNodeProps))
      this.$refs.grid.refreshList({})
    },
    // getDynamicParams (data, parentNodeProps) {
    //   const queryParam = {}
    //   for (const key in parentNodeProps) {
    //     if (Object.hasOwnProperty.call(parentNodeProps, key)) {
    //       const value = parentNodeProps[key]
    //       queryParam[key] = data[value]
    //     }
    //   }
    //   return queryParam
    // },
    async init () {
      await this.initDeptOptions()
      this.showGrid = true
    },
    async initDeptOptions () {
      const data = await this.$utils.dictionary.getOptionsByKey('DIC_WATF_B_UP_D')
      function handler (root) {
        const list = data.filter(item => item.fcode === root)
        if (!list.length) return null
        return list.map(item => ({
          label: item.label,
          value: item.value,
          children: handler(item.value)
        }))
      }
      this.extraConditions = [{ label: '所属部门', type: 'el-cascader', field: 'WATF_B_SYS_USER$DEPT_ID', props: { size: 'small', clearable: true, props: { multiple: true, checkStrictly: true }, options: handler('ROOT') } }]
    },
    levelOrder (root) {
      const res = []; const queue = []
      queue.push(root)
      if (root === null) {
        return res
      }
      while (queue.length !== 0) {
        const length = queue.length
        for (let i = 0; i < length; i++) {
          const node = queue.shift()
          res.push(node.id)
          for (let n = 0; n < node.children?.length; n++) {
            if (node.children[n]) {
              queue.push(node.children[n])
            }
          }
        }
      }
      return res
    },
    defaultQueryParamsProcessor (params) {
      const methodParams = JSON.parse(params.methodParams)
      const isLeaf = this.currentNode.isLeaf
      const leafIds = isLeaf ? [] : this.levelOrder(this.currentNode)
      methodParams.queryParam = {
        MENU_ID: isLeaf ? this.currentNode.id : leafIds.join(',')
      }
      // methodParams.simpleQueryParam.push({
      //   field: 'YSQJC_PW_MENU$MENU_ID',
      //   value: isLeaf ? this.currentNode.id : leafIds.join(','),
      //   fieldValueRel: isLeaf ? 'like' : 'in'
      // })
      // methodParams.queryParam = {}
      params.methodParams = JSON.stringify(methodParams)
      return params
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .vxe-toolbar {
    padding: 10px 0 !important;

    .toolbar-left-container .el-button {
      margin-bottom: 0 !important;
    }
  }
}
.no-pad { padding: 0; }
</style>
